<template>
  <m-layout>
    <mt-header slot="header" title="成绩详情">
      <m-header-back slot="left"/>
    </mt-header>
    <div slot="body">
      <m-section class="score-detail">
        <m-flexbox class="score-detail-header" justify="space-between">
          <e-heading>{{query.testMethodName}}</e-heading>
          <router-link class="blue"
                       :to="{path: '/smartCourse/scoresCriteria',
                       query: {
                         studentId: query.studentId,
                         testItemText: query.testItemText,
                         testItemId: query.testModeId,
                         ageGroupText: query.ageGroupText,
                         ageGroupId: query.levelId,
                         testContentId: query.testMethodId,
                       }}">
            查看评分标准
          </router-link>
        </m-flexbox>
        <m-flexbox class="score-detail-item" justify="space-between">
          <div>测试日期</div>
          <div class="small weak">{{new Date(scoreDetail.testDate).format()}}</div>
        </m-flexbox>
        <m-flexbox class="score-detail-item" justify="space-between">
          <div>测试成绩</div>
          <div class="small weak" v-if="scoreDetail.testScore">{{scoreDetail.testScore}}{{scoreDetail.testScoreDesc}}</div>
          <div class="small weak" v-else>无</div>
        </m-flexbox>
        <m-flexbox class="score-detail-item" justify="space-between">
          <div>测试基础分</div>
          <div class="small weak">{{scoreDetail.testBaseScore ? scoreDetail.testBaseScore : '无'}}</div>
        </m-flexbox>
        <m-flexbox class="score-detail-item" justify="space-between">
          <div>加减法项</div>
          <div class="small weak" v-if="scoreDetail.extraTestScores && scoreDetail.extraTestScores.length">
            <p v-for="(item, index) in scoreDetail.extraTestScores" :key="index">
              {{index+1}}、{{item.testName}}
            </p>
          </div>
          <div class="small weak" v-else>无</div>
        </m-flexbox>
        <m-flexbox class="score-detail-item" justify="space-between">
          <div>最终得分</div>
          <div class="small weak">{{scoreDetail.testTotalScore ? scoreDetail.testTotalScore : '无'}}</div>
        </m-flexbox>
        <m-flexbox class="score-detail-item" justify="space-between">
          <div>最终评级</div>
          <div class="small weak">{{scoreDetail.testScoreLevel ? scoreDetail.testScoreLevel : '无'}}</div>
        </m-flexbox>
      </m-section>
    </div>
  </m-layout>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      scoreDetail: state => state.smartCourse.scoreDetail
    })
  },
  data () {
    return {
      query: this.$route.query
    }
  },
  mounted () {
    this.studentTestScoreDetail()
  },
  methods: {
    studentTestScoreDetail () {
      this.$store.dispatch('smartCourse/studentTestScoreDetail', {
        studentId: this.query.studentId,
        levelId: this.query.levelId,
        testModeId: this.query.testModeId,
        testMethodId: this.query.testMethodId,
        testDateTimestamp: this.query.testDate,
        testItemText: this.query.testItemText,
        ageGroupText: this.query.ageGroupText,
        testMethodName: this.query.testMethodName
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.score-detail{
  &-header{
    padding-right: 0.26rem;
  }
  &-item{
    min-height: 1rem;
    padding: 0 .26rem;
  }
}
</style>
